<template>
    <div class="usage">
        <el-row type="flex">
            <el-col :span="12">
                <el-upload
                        action=""
                        class="upload-demo"
                        :http-request="uploadFile"
                        :on-preview="handlePreview"
                        :on-remove="handleRemove"
                        :on-progress="handleProgress"
                        :on-change="handleChange"
                        :on-error="handleError"
                        :on-success="handleSuccess"
                        :before-remove="beforeRemove"
                        :before-upload="beforeUpload"
                        multiple
                        :limit="3"
                        :on-exceed="handleExceed"
                        :file-list="fileList">
                    <el-button size="small" type="primary">点击上传</el-button>
                    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                </el-upload>
                <el-progress :percentage="percentage"  :width="700"></el-progress>
            </el-col>
            <el-col :span="12">

            </el-col>
        </el-row>
    </div>
</template>

<script>
    import testApi from '@/api/test'
    export default {
        name: "ElementUpload",
        data() {
            return {
                percentage: 0,
                fileList: []
            }
        },
        methods: {
            handleRemove(file, fileList) {
                console.log("1")
                console.log(file, fileList);
            },
            handlePreview(file) {
                console.log("2")
                console.log(file);
            },
            handleExceed(files, fileList) {
                console.log("3")
                this.$message({type: 'warning',
                    message:`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`});
            },
            handleProgress(event, file, fileList) {
                console.log("6")
            },
            handleChange(file, fileList) {
                console.log("7")
            },
            handleError(response, file, fileList) {
                console.log("8")
            },
            handleSuccess(err, file, fileList) {
                console.log(fff,"=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-")
                console.log("9")
            },
            beforeRemove(file, fileList) {
                console.log("4")
                return this.$confirm(`确定移除 ${ file.name }？`);
            },
            beforeUpload(file) {
                console.log(file)
            },
            uploadFile(params) {
                let formData = new FormData();
                formData.append("file", params.file);
                testApi.doHello3(formData,(progressEvent)=>{
                    console.log(progressEvent,"=========")
                    this.percentage = Number((progressEvent.loaded / progressEvent.total * 100).toFixed(2))
                }).then(result=>{
                    console.log(result,"=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-")
                })
                console.log(params,"3333")
            },
        }
    }
</script>

<style scoped lang="less">
    @import "../../../../components/usage/usage";
</style>